<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold cyber-text mb-2">设备详情</h2>
      <p class="text-gray-400">查看设备的详细信息和运行状态</p>
    </div>
    
    <div class="space-y-6">
      <!-- 设备基本信息 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-server mr-2"></i>基本信息
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div>
            <label class="block text-sm text-gray-400 mb-1">设备名称</label>
            <p class="text-white">测试服务器-001</p>
          </div>
          <div>
            <label class="block text-sm text-gray-400 mb-1">设备类型</label>
            <p class="text-white">Linux服务器</p>
          </div>
          <div>
            <label class="block text-sm text-gray-400 mb-1">状态</label>
            <span class="flex items-center text-green-400">
              <span class="status-indicator online w-3 h-3 bg-green-400 rounded-full mr-2"></span>
              在线
            </span>
          </div>
          <div>
            <label class="block text-sm text-gray-400 mb-1">IP地址</label>
            <p class="text-white font-mono">192.168.1.101</p>
          </div>
          <div>
            <label class="block text-sm text-gray-400 mb-1">操作系统</label>
            <p class="text-white">Ubuntu 20.04 LTS</p>
          </div>
          <div>
            <label class="block text-sm text-gray-400 mb-1">最后连接</label>
            <p class="text-white">2分钟前</p>
          </div>
        </div>
      </div>

      <!-- 系统资源监控 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="glass-effect rounded-xl p-6 tech-card">
          <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
            <i class="fas fa-microchip mr-2"></i>CPU使用率
          </h3>
          <div class="space-y-4">
            <div class="flex justify-between items-center">
              <span class="text-gray-300">当前使用率</span>
              <span class="text-tech-blue font-mono">35%</span>
            </div>
            <div class="w-full h-4 bg-gray-700 rounded-full overflow-hidden">
              <div class="tech-progress h-full" style="width: 35%"></div>
            </div>
            <div class="grid grid-cols-2 gap-4 text-sm">
              <div>
                <span class="text-gray-400">平均负载:</span>
                <span class="text-white ml-2">0.85</span>
              </div>
              <div>
                <span class="text-gray-400">核心数:</span>
                <span class="text-white ml-2">8</span>
              </div>
            </div>
          </div>
        </div>

        <div class="glass-effect rounded-xl p-6 tech-card">
          <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
            <i class="fas fa-memory mr-2"></i>内存使用率
          </h3>
          <div class="space-y-4">
            <div class="flex justify-between items-center">
              <span class="text-gray-300">已使用内存</span>
              <span class="text-tech-blue font-mono">68%</span>
            </div>
            <div class="w-full h-4 bg-gray-700 rounded-full overflow-hidden">
              <div class="tech-progress h-full" style="width: 68%"></div>
            </div>
            <div class="grid grid-cols-2 gap-4 text-sm">
              <div>
                <span class="text-gray-400">已用:</span>
                <span class="text-white ml-2">10.9GB</span>
              </div>
              <div>
                <span class="text-gray-400">总量:</span>
                <span class="text-white ml-2">16GB</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 运行进程 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-tasks mr-2"></i>运行中的测试任务
        </h3>
        <div class="space-y-3">
          <div class="flex items-center justify-between p-3 bg-yellow-900/20 rounded-lg border border-yellow-500/30">
            <div>
              <h4 class="text-white font-medium">Web登录流程测试</h4>
              <p class="text-gray-400 text-sm">PID: 12345 | 运行时间: 5分钟</p>
            </div>
            <span class="text-yellow-400">执行中</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 设备详情页面
</script>

